<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-flex"
		:class="_classes"
		:style="_styles"
	>
		<slot></slot>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed } from "vue";
	import props from "./props";

	// **************************************************************************************************************
	// * Refs
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Props
	// **************************************************************************************************************
	const _props = defineProps(props);

	// **************************************************************************************************************
	// * Emits
	// **************************************************************************************************************
	const _emits = defineEmits([]);

	// **************************************************************************************************************
	// * Classes
	// **************************************************************************************************************
	const _classes = computed(() => {
		const array = [];
		return array;
	});

	// **************************************************************************************************************
	// * Styles
	// **************************************************************************************************************
	const _styles = computed(() => {
		const array = [];

		// 换行
		if (_props.wrap) {
			array.push(`--pure-flex-wrap: wrap`);
		}

		// 纵向
		if (_props.direction) {
			array.push(`--pure-flex-direction: ${_props.direction}`);
		}

		// 间距
		if (_props.gap) {
			array.push(`--pure-flex-gap: ${_props.gap}`);
		}

		// align-items
		if (_props.align) {
			array.push(`--pure-flex-align-items: ${_props.align}`);
		}

		// justify-content
		if (_props.justify) {
			array.push(`--pure-flex-justify-content: ${_props.justify}`);
		}

		// 一键居中
		if (_props.center) {
			array.push(`--pure-flex-justify-content: center`);
			array.push(`--pure-flex-align-items: center`);
		}

		return array;
	});

	// **************************************************************************************************************
	// * Computed
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Functions
	// **************************************************************************************************************
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
